<!--
 * @Author: zhaozhehao zhaozhehao@erayt.com
 * @Date: 2023-06-05 11:16:47
 * @LastEditors: zhaozhehao zhaozhehao@erayt.com
 * @LastEditTime: 2023-06-05 17:16:34
 * @Description: 
 * 
-->
<template>
    <el-drawer class="header-drawer-container" direction="ltr" :show-close="false" :model-value="store.state.menuVisible"
        @close="store.commit('changeMenuVisible', false)">

        <template v-slot:header>
            <el-button class="header-menu-btn" circle :icon="MoreFilled" @click="store.commit('changeMenuVisible')" />
        </template>
        <el-menu class="header-menu-vertical">
            <el-sub-menu index="1">
                <template #title>
                    <span>首页</span>
                </template>
                <el-menu-item>
                    插画
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-drawer>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { MoreFilled } from '@element-plus/icons-vue'
const store = useStore()
</script>

<style scope lang="less">
.header-drawer-container {
    width: 200px !important;

    .el-drawer__body {
        padding: 0 !important;
    }

}

.header-menu-vertical {
    overflow-x: hidden;
}

.el-drawer__header>:first-child {
    flex: none !important;
}

.header-menu-btn {
    border: none !important;
}
</style>